<template>
  <div class="home-container">
    <!-- 添加音频元素 -->
    <audio ref="audioPlayer" loop class="hidden">
      <source :src="bgmUrl" type="audio/mp3">
    </audio>

    <!-- 添加音乐控制按钮 -->
    <div class="music-control" @click="toggleMusic">
      <div class="music-icon" :class="{ 'playing': isPlaying }">
        <span class="iconfont">{{ isPlaying ? '🎵' : '🔇' }}</span>
      </div>
    </div>

    <!-- 顶部横幅 -->
    <div class="banner">
      <div class="banner-content">
        <h1 class="title" style="padding-bottom: 16px">生日快乐</h1>
        <BirthdayCake
        />
        <p class="subtitle" style="margin-top:55px ">今天是你的特别日子，让我们一起创造美好的回忆</p>
      </div>
      <div class="danmaku-wrapper">
      <Danmaku :containerHeight="200" /> <!-- 假设头部高度为64px -->
    </div>
    </div>
   

    <!-- 功能区块 -->
    <div class="features">
      <a-row :gutter="[24, 24]" justify="center">
        <a-col :xs="24" :sm="12" :md="8" v-for="feature in features" :key="feature.title">
          <a-card class="feature-card" @click="$router.push(feature.route)">
            <template #cover>
              <div class="card-icon">
                <component :is="feature.icon" />
              </div>
            </template>
            <a-card-meta :title="feature.title">
              <template #description>{{ feature.description }}</template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 最新祝福 -->
    <div class="recent-wishes">
      <h2 class="section-title">最新祝福</h2>
      <a-carousel autoplay class="wishes-carousel">
        <template v-for="(group, index) in groupedWishes" :key="index">
          <div class="carousel-content">
            <a-row :gutter="[16, 16]">
              <a-col :span="8" v-for="wish in group" :key="wish.id">
                <a-card class="wish-card" v-if="wish">
                  <template #cover>
                    <div class="wish-avatar">
                      <a-avatar :size="48">
                        {{ wish.user?.userName?.[0] || '?' }}
                      </a-avatar>
                    </div>
                  </template>
                  <a-card-meta>
                    <template #title>{{ wish.user?.userName || '匿名用户' }}</template>
                    <template #description>
                      <div class="wish-text">{{ wish.content }}</div>
                    </template>
                  </a-card-meta>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </template>
      </a-carousel>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import {  useRouter} from 'vue-router';
import Danmaku from '../components/Danmaku.vue'
import {
  HeartOutlined,
  MessageOutlined,
  GiftOutlined,
  ClockCircleOutlined
} from '@ant-design/icons-vue';
import BirthdayCake from "./BirthdayCake.vue";

const router = useRouter();

// 功能区块数据
const features = [
  {
    title: '留言祝福',
    description: '在这里写下你的祝福，让温暖传递',
    icon: MessageOutlined,
    route: '/wishes'
  },
  {
    title: '生日贺卡',
    description: '聆听生日歌，感受独特的祝福时刻',
    icon: GiftOutlined,
    route: '/card'
  },
  {
    title: '回忆时光',
    description: '珍藏美好回忆，定格精彩瞬间',
    icon: ClockCircleOutlined,
    route: '/memories'
  }
];

// 模拟祝福数据
const wishes = ref([
  {
    id: 1,
    content: '祝你生日快乐呀，天天开心呀！',
    user: { userName: '你的朋友' }
  },
  {
    id: 2,
    content: '愿你永远青春，永远似18！',
    user: { userName: '你的朋友' }
  },
  {
    id: 3,
    content: '愿你的时光清新如夏，愿你的岁月安好不容倾塌！',
    user: { userName: '你的朋友' }
  },
  {
    id: 4,
    content: '愿你在生活中处处有惊喜，处处有欢笑！',
    user: { userName: '你的朋友' }
  },
  {
    id: 5,
    content: '愿你一生有山可靠，有树可栖。与心爱之人，春赏花，夏纳凉，秋登山，冬淋雪！',
    user: { userName: '你的朋友' }
  },
  {
    id: 6,
    content: '「生日快樂！願你的每一天都充滿愛和快樂！」',
    user: { userName: '你的朋友' }
  },
  {
    id: 7,
    content: '愿你仰天大笑出门去，我辈岂是蓬蒿人！',
    user: { userName: '你的朋友' }
  },
  {
    id: 8,
    content: '愿你以后善其身，遇良人，予你欢喜城，暖色浮余生！',
    user: { userName: '你的朋友' }
  },
  {
    id: 9,
    content: '但愿从今日，时时报平安！',
    user: { userName: '你的朋友' }
  },
{
  id: 10,
      content: '愿所得皆所期，所失皆无碍！',
    user: { userName: '你的朋友' }
},
  {
    id: 11,
    content: 'The warm smile，if the quality！',
    user: { userName: '你的朋友' }
  },
  {
    id: 10,
    content: 'If I could rearrange the alphabet,I’d put Y and I together！',
    user: { userName: '你的朋友' }
  },
  // ... 更多祝福数据
]);

// 将祝福数据分组，每组3个
const groupedWishes = computed(() => {
  const groups = [];
  for (let i = 0; i < wishes.value.length; i += 3) {
    groups.push(wishes.value.slice(i, i + 3));
  }
  return groups;
});

// 跳转到祝福页面
const goToWishes = () => {
  router.push('/wishes');
};

// 音乐播放相关
const audioPlayer = ref(null)
const isPlaying = ref(false)
const bgmUrl = '/music/bg.mp3' // 确保音乐文件放在 public/music 目录下

// 切换音乐播放状态
const toggleMusic = () => {
  if (audioPlayer.value) {
    if (isPlaying.value) {
      audioPlayer.value.pause()
    } else {
      audioPlayer.value.play()
    }
    isPlaying.value = !isPlaying.value
  }
}

// 自动播放音乐（需要用户交互）
const tryAutoPlay = async () => {
  try {
    if (audioPlayer.value) {
      // 设置音量
      audioPlayer.value.volume = 0.5
      // 尝试播放
      const playPromise = audioPlayer.value.play()
      if (playPromise !== undefined) {
        playPromise
          .then(() => {
            isPlaying.value = true
            console.log('自动播放成功')
          })
          .catch(error => {
            console.log('自动播放失败:', error)
            // 大多数浏览器需要用户交互才能自动播放
          })
      }
    }
  } catch (error) {
    console.error('播放音乐出错:', error)
  }
}

// 监听页面可见性变化
const handleVisibilityChange = () => {
  if (document.hidden) {
    // 页面隐藏时暂停音乐
    if (audioPlayer.value && isPlaying.value) {
      audioPlayer.value.pause()
    }
  } else {
    // 页面显示时恢复播放
    if (audioPlayer.value && isPlaying.value) {
      audioPlayer.value.play()
    }
  }
}

onMounted(() => {
  // 监听页面可见性变化
  document.addEventListener('visibilitychange', handleVisibilityChange)
  // 尝试自动播放
  tryAutoPlay()
})

onUnmounted(() => {
  // 移除监听器
  document.removeEventListener('visibilitychange', handleVisibilityChange)
  // 停止播放
  if (audioPlayer.value) {
    audioPlayer.value.pause()
    audioPlayer.value.currentTime = 0
  }
})
</script>

<style scoped>
.home-container {
  padding-top: 64px; /* 导航栏高度 */
  min-width: 720px;
  min-height: 100vh;
  background: #fff5f6;
}


.banner {
  height: 500px;
  background: linear-gradient(135deg, #ff6b81 0%, #ff9ff3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 0 20px;
  margin-bottom: 48px;
  position: relative; /* 添加相对定位 */
  overflow: hidden; /* 确保弹幕不会溢出 */
}

.banner-content {
  max-width: 800px;
  position: relative; /* 添加相对定位 */
  z-index: 1; /* 确保内容在弹幕上层 */
}
.danmaku-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; /* 确保在 banner-content 下层 */
}

.title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 16px;
  animation: fadeInUp 1s ease;
}

.subtitle {
  font-size: 20px;
  margin-bottom: 32px;
  opacity: 0.9;
  animation: fadeInUp 1s ease 0.2s;
}

.cta-button {
  font-size: 18px;
  height: 48px;
  padding: 0 32px;
  animation: fadeInUp 1s ease 0.4s;
}

.features {
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 0 20px;
}

.feature-card {
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 12px;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-icon {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: linear-gradient(135deg, #ff6b81 0%, #ff9ff3 100%);
  color: white;
}

.recent-wishes {
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 0 20px;
}

.section-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 24px;
  text-align: center;
}

.wishes-carousel {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.carousel-content {
  padding: 16px;
}

.wish-card {
  text-align: center;
  border-radius: 8px;
}

.wish-avatar {
  padding: 16px 0;
  background: #f5f5f5;
}

.wish-text {
  color: #666;
  line-height: 1.6;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner {
    height: 400px;
  }

  .title {
    font-size: 36px;
  }

  .subtitle {
    font-size: 18px;
  }

  .section-title {
    font-size: 24px;
  }
}

@media (max-width: 576px) {
  .banner {
    height: 300px;
  }

  .title {
    font-size: 28px;
  }

  .subtitle {
    font-size: 16px;
  }

  .cta-button {
    font-size: 16px;
    height: 40px;
    padding: 0 24px;
  }

  .card-icon {
    height: 120px;
    font-size: 36px;
  }
}

/* 音乐控制按钮样式 */
.music-control {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 1001;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.music-control:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.3);
}

.music-icon {
  font-size: 24px;
  color: #fff;
  animation: rotate 3s linear infinite;
  animation-play-state: paused;
}

.music-icon.playing {
  animation-play-state: running;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.hidden {
  display: none;
}
</style>